<template>
	<h1>{{userData}}</h1>
  <div>
    User {{ $route.params.username }} with post {{ $route.params.postId }}
  </div>
</template>

<script setup>
// 响应路由参数的变化
// 方案一：要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const userData = ref(null);

watch(() => route.params.postId, (newId, oldId) => {
 // 对路由变化做出响应...
	alert(route.params.postId)
})


// 方案二：
// import { onBeforeRouteUpdate } from 'vue-router'

// onBeforeRouteUpdate(async (to, from) => {
//   // 对路由变化做出响应...
//   // userData.value = await fetchUser(to.params.id)
// 	alert(1)
// })
</script>